<template>
<div class="Title">GCH的书架</div>
<div v-for="(Item,Idex) in Arr" class="Content" :key="Item.id">
    <span>{{ Item.book }}</span>
    <span>{{ Item.name }}</span>
    <button @click="Func(Idex)">删除</button>
</div>
</template>

<script setup>
    import { ref } from 'vue';
    let Func=(n)=>
    {
        if(window.confirm("Are You Sure???"))
        Arr.value.splice(n,1)
    }
    let Arr=ref([
        {id:6,name:"AAAAA",book:"BBBBBB"},
        {id:1,name:"罗贯中",book:"西游记"},
        {id:1,name:"曹雪芹",book:"红楼梦"},
        {id:1,name:"施耐腌",book:"水浒传"},
        {id:4,name:"罗贯中",book:"三国志"}
    ])
</script>

<style>
    button{
        height: 30px;
    }
    .Content{
        display: flex;
        justify-content: space-around;
        height: 50px;
    }
    .Title{
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    #app{
        margin: 100px auto;
        width: 400px;
        height: 300px;
        border: solid grey;
    }
</style>